<template>
  <el-menu
    class="el-menu-vertical-demo"
    :collapse="loaclIsCollapse"
    text-color="#fff"
    active-text-color="#1aaadc"
    background-color="#052d56"
    menu-trigger="click"
    router
  >
    <el-menu-item>
      <img src="../../assets/sagittarius.svg" alt="" />
      <span>Noob Sagittarius</span></el-menu-item
    >
    <el-sub-menu index="1">
      <template #title>
        <el-icon><Tools /></el-icon>
        <span>系统管理</span>
      </template>
      <el-menu-item index="/meunManagement" @click="setBreadceunbList"
        >菜单管理</el-menu-item
      >
      <el-menu-item index="/roleManagement">角色管理</el-menu-item>
      <el-menu-item index="/usersList">用户管理</el-menu-item>
    
    </el-sub-menu>
  </el-menu>
</template>
<script lang="ts" setup>
import { toRef } from "vue";
import { useStore } from "../../store";
const store = useStore();
const props = defineProps({
  isCollapse: Boolean,
});
let loaclIsCollapse = toRef(props, "isCollapse");
const setBreadceunbList = () => {
  store.commit("SET_BREADCRUMN_LIST", []);
};
</script>

<style lang="scss" scoped>
.el-menu {
  height: 100%;
  border-right: none;
}

.el-menu,
.el-menu--collapse {
  height: 100%;
}
:deep(.el-menu-item) {
  color: #fff;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
.el-menu-vertical-demo::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.el-icon,
svg {
  width: 1.1em;
  height: 1.1em;
}
</style>
